<template>
	<view class="repair-page">
		<!-- 地图区域 -->
		<view class="map-container">
			<map id="repairMap" :latitude="currentLocation.latitude" :longitude="currentLocation.longitude"
				:scale="mapScale" :markers="markers" :polyline="polyline" :show-location="true" :enable-3D="true"
				:enable-zoom="true" :enable-scroll="true" :enable-rotate="true" :enable-overlooking="true"
				:show-compass="true" :enable-satellite="false" :enable-traffic="false" :enable-building="true"
				:enable-indoor="false" :enable-poi="true" :enable-scale="true" :min-scale="3" :max-scale="20"
				:enable-drag="true" :enable-pan="true" @tap="onMapTap" @markertap="onMarkerTap"
				@regionchange="onRegionChange" @updated="onMapUpdated" class="map-view">
			</map>
			<!-- 附近门店按钮 -->
			<view class="nearby-stores-btn" @click="goToNearbyStores">
				<text>附近门店</text>
				<image class="nearby" src="/static/vehicle_repair/repair/to.png" mode="widthFix"></image>
			</view>



		</view>

		<!-- 门店信息区域 -->
		<!-- 门店信息区域 -->
		<view class="store-info">
			<view class="store-header">
				<view class="store-name">车百事汽车生活馆</view>
				<view class="distance">{{storeInfo.distance}}</view>
			</view>

			<view class="info-bottom">
				<view class="left-content">
					<view class="store-rating">
						<uni-rate size="20" v-model="storeInfo.rating" :readonly="true" />
						<text class="rating-text">{{storeInfo.rating}} 分</text>
					</view>

					<view class="store-details">
						<view class="detail-item">
							<text class="label">营业时间:</text>
							<text class="value">{{storeInfo.hours}}</text>
						</view>
						<view class="detail-item">
							<text class="label">位置:</text>
							<text class="value">{{storeInfo.address}}</text>
						</view>
					</view>
				</view>

				<view class="store-image">
					<image src="/static/vehicle_repair/repair/banner.png" mode="widthFix"></image>
				</view>
			</view>
		</view>

		<!-- 操作按钮区域 -->
		<view class="action-buttons">
			<button class="contact-btn" @click="contactStore">
				<image class="btn-img" src="/static/vehicle_repair/repair/phone.png" mode="widthFix"></image>
				<text>联系门店</text>
			</button>

			<button class="book-btn" @click="bookNow">
				<image class="btn-img" src="/static/vehicle_repair/repair/booking.png" mode="widthFix"></image>
				<text>立即预定</text>
			</button>
		</view>

		<!-- 电话弹窗 -->
		<view class="phone-popup" v-if="showPhonePopup" @click="closePhonePopup">
			<view class="popup-content" @click.stop>
				<button class="dial-btn" @click="dialPhone">{{storeInfo.phone}}</button>
				<button class="copy-btn" @click="copyPhoneNumber">复制</button>
				<button class="cancel-btn" @click="closePhonePopup">取消拨号</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mapScale: 16, // 地图缩放级别
				currentLocation: {
					latitude: 38.5665,
					longitude: 113.5535
				}, // 当前位置
				storeInfo: {
					name: "车百事汽车生活馆",
					distance: "556m",
					rating: 3.2,
					hours: "周一至周五 早上8:00-晚上22:00",
					address: "山阳区人民路与解放路交叉口",
					image: "/static/vehicle_repair/repair/position.png",
					phone: "1233211234567",
					targetLocation: {
						latitude: 34.82348,
						longitude: 113.55814
					} // 目标位置（门店位置）
				},
				markers: [],
				polyline: [],
				mapContext: null,
				copyrightTimer: null,
				showPhonePopup: false // 控制电话弹窗显示
			}
		},

		onLoad() {
			// 页面加载时初始化地图
			this.$nextTick(() => {
				this.initMap();
			});
		},


		methods: {
			// 初始化地图
			initMap() {
				// 创建地图上下文
				this.mapContext = uni.createMapContext('repairMap', this);

				// 设置地图标记
				this.setMapMarkers();
			},
			
			

			// 设置地图标记
			setMapMarkers() {
				this.markers = [
					// 当前位置标记
					{
						id: 'current',
						latitude: this.currentLocation.latitude,
						longitude: this.currentLocation.longitude,
						title: '我的位置',
						iconPath: '/static/index/定位2.png',
						width: 30,
						height: 30,
						callout: {
							content: '我的位置',
							color: '#333',
							fontSize: 12,
							borderRadius: 4,
							bgColor: '#fff',
							padding: 8,
							display: 'ALWAYS'
						}
					},
					// 目标位置标记（门店位置）
					{
						id: 'target',
						latitude: this.storeInfo.targetLocation.latitude,
						longitude: this.storeInfo.targetLocation.longitude,
						title: this.storeInfo.name,
						iconPath: '/static/vehicle_repair/repair/position.png',
						width: 40,
						height: 40,
						callout: {
							content: this.storeInfo.name,
							color: '#333',
							fontSize: 12,
							borderRadius: 4,
							bgColor: '#fff',
							padding: 8,
							display: 'ALWAYS'
						}
					}
				];
			},

			// 地图点击事件
			onMapTap(e) {
				console.log('地图点击：', e);
			},

			// 标记点击事件
			onMarkerTap(e) {
				console.log('标记点击：', e);
				const markerId = e.detail.markerId;

				if (markerId === 'current') {
					uni.showToast({
						title: '当前位置',
						icon: 'none'
					});
				} else if (markerId === 'target') {
					uni.showToast({
						title: this.storeInfo.name,
						icon: 'none'
					});
				}
			},

			// 地图区域变化事件
			onRegionChange(e) {
				console.log('地图区域变化：', e);
				if (e.type === 'end') {
					// 区域变化结束时更新缩放级别
					this.mapScale = e.detail.scale;
					console.log('当前缩放级别：', this.mapScale);
				}
			},

			// 地图更新事件
			onMapUpdated(e) {
				console.log('地图更新：', e);
			},

			// 测试缩放功能
			testZoom() {
				console.log('当前缩放级别：', this.mapScale);
				uni.showToast({
					title: `当前缩放级别: ${this.mapScale}`,
					icon: 'none',
					duration: 2000
				});
			},

			// 跳转到附近门店页面
			goToNearbyStores() {
				uni.navigateTo({
					url: "/pages/vehicle_repair/nearbyStore/nearbyStore"
				})
			},

			// 联系门店
			contactStore() {
				this.showPhonePopup = true;
			},

			// 关闭电话弹窗
			closePhonePopup() {
				this.showPhonePopup = false;
			},
			dialPhone() {
				uni.showToast({
						title: "已拨打电话",
						icon: 'success'
					}),
					this.showPhonePopup = false;
			},

			// 复制电话号码
			copyPhoneNumber() {
				uni.setClipboardData({
					data: this.storeInfo.phone,
					success: () => {
						uni.showToast({
							title: '电话号码已复制',
							icon: 'success'
						});
						this.showPhonePopup = false;
					}
				});
			},

			// 立即预定
			bookNow() {
				uni.navigateTo({
					url: "/pages/vehicle_repair/bookingRepair/bookingRepair"
				})
			},
		}
	}
</script>

<style scoped>
	.repair-page {
		padding: 20rpx;
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	/* 地图容器 */
	.map-container {

		position: relative;
		height: 710rpx;
		width: 100%;
	}

	.map-view {
		width: 100%;
		height: 100%;
		/* 允许地图接收所有触摸和鼠标事件 */
		touch-action: auto;
		-webkit-touch-callout: default;
		-webkit-user-select: auto;
		user-select: auto;
	}

	/* 隐藏地图版权信息 - 更精确的选择器，避免影响地图交互 */
	.map-view ::v-deep .qq-map-copyright,
	.map-view ::v-deep .qq-map-logo,
	.map-view ::v-deep .qq-map-info-content {
		display: none !important;
		visibility: hidden !important;
		opacity: 0 !important;
	}

	/* 只隐藏版权文字，不影响地图交互 */
	.map-view ::v-deep .qq-map-copyright *,
	.map-view ::v-deep .qq-map-logo *,
	.map-view ::v-deep .qq-map-info-content * {
		font-family: inherit !important;
	}


	.nearby-stores-btn {
		position: absolute;
		bottom: 20rpx;
		right: 20rpx;
		background-color: #ff6b35;
		color: white;
		padding: 16rpx 24rpx;
		border-radius: 8rpx;
		font-size: 28rpx;
		z-index: 1000;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
		display: flex;
		align-items: center;
		gap: 10rpx;
	}

	.nearby {
		width: 10rpx;
		height: 10rpx;
	}

	.location-btn {
		position: absolute;
		bottom: 20rpx;
		left: 20rpx;
		width: 80rpx;
		height: 80rpx;
		background-color: white;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
		z-index: 1000;
	}

	.location-btn image {
		width: 40rpx;
		height: 40rpx;
	}

	.test-zoom-btn {
		position: absolute;
		top: 20rpx;
		left: 20rpx;
		background-color: rgba(0, 0, 0, 0.7);
		color: white;
		padding: 12rpx 20rpx;
		border-radius: 8rpx;
		font-size: 24rpx;
		z-index: 1000;
	}


	/* 门店信息区域 */
	.store-info {
		background-color: white;
		margin: 20rpx;
		padding: 30rpx;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}

	.store-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.store-name {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	.distance {
		font-size: 28rpx;
		color: blue;
	}

	.info-bottom {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		gap: 20rpx;
	}

	.left-content {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.store-rating {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.rating-text {
		font-size: 28rpx;
		margin-left: 16rpx;
		color: #666;
	}

	.store-details {
		flex: 1;
	}

	.detail-item {
		display: flex;
		margin-bottom: 16rpx;
	}

	.label {
		font-size: 28rpx;
		color: #666;
		width: 140rpx;
		flex-shrink: 0;
	}

	.value {
		font-size: 28rpx;
		color: #333;
		flex: 1;
	}

	.store-image {
		width: 220rpx;
		height: 180rpx;
		border-radius: 12rpx;
		flex-shrink: 0;
	}

	.store-image image {
		width: 100%;
		height: 100%;
		border-radius: 12rpx;
	}

	/* 操作按钮区域 */
	.action-buttons {
		display: flex;
		padding: 20rpx;
		gap: 15rpx;
	}

	.contact-btn,
	.book-btn {
		flex: 1;
		height: 88rpx;
		border-radius: 44rpx;
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-weight: bold;
	}

	.contact-btn {
		background-color: #007aff;
		color: white;
	}

	.book-btn {
		background-color: #ff6b35;
		color: white;
	}

	.btn-img {
		width: 36rpx;
		height: 36rpx;
		margin-right: 20rpx;
	}

	/* 电话弹窗样式 */
	.phone-popup {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 9999;
		display: flex;
		align-items: flex-end;
		justify-content: center;
	}

	.popup-content {
		background-color: white;
		width: 100%;
		padding: 40rpx 30rpx 60rpx;
		border-radius: 20rpx 20rpx 0 0;
		text-align: center;
		animation: slideUp 0.3s ease-out;
	}


	.copy-btn {
		width: 100%;
		height: 88rpx;
		background-color: #f5f5f5;
		color: #666;
		border: none;
		border-radius: 22rpx;
		font-size: 32rpx;
		margin-bottom: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.dial-btn {
		width: 100%;
		height: 88rpx;
		background-color: #f5f5f5;
		color: #666;
		border: none;
		border-radius: 22rpx;
		font-size: 32rpx;
		margin-bottom: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.cancel-btn {
		width: 100%;
		height: 88rpx;
		background-color: #f5f5f5;
		color: #666;
		border: none;
		border-radius: 22rpx;
		font-size: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	@keyframes slideUp {
		from {
			transform: translateY(100%);
		}

		to {
			transform: translateY(0);
		}
	}
</style>